<template>
  <view>
    <Table ref="table" :fetchData="fetchData" :autoFetch="false">
      <template #default="{ data }">
        <!-- <uni-card
          @click="cardClick(item)"
          v-for="item in data"
        >
          <template #title>
            <view class="title">
              <view class="title-left">
                <h3 class="title-title">{{ item.checkUserName || item.planUserNames }}</h3>
                <span class="title-times">
                  {{ item.checkState }}
                </span>
              </view>
            </view>
          </template>
          <text class="uni-body">{{ item.taskStartTime }}</text>
        </uni-card> -->
        <Card
          :stateColor="colors[item.checkState]"
          @click="cardClick(item)"
          v-for="item in data"
          :title="item.planName"
          :ff="formathour(item)"
          :fr="item.checkScope"
          :content="item.checkType"
          :state="item.checkState"
        >
        </Card>
      </template>
    </Table>
  </view>
</template>
<script>
export default {
  data() {
    return {
      row: {},
    };
  },
  onLoad(payload) {
    if (payload.row) {
      this.row = JSON.parse(decodeURIComponent(payload.row));
    }
  },
};
</script>
<script setup>
import { ref, onActivated, getCurrentInstance, reactive, onMounted } from "vue";
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/yhpc/pcjhrw.js";
import { router } from "@/router/index.js";
import { PATH } from "../paths";
import Card from "@/components/Card.vue";
const colors = ref({
  待排查: "#e0c59f",
  已排查: "#8888ff",
  已超时: "#ff8888",
});
const parentNode = ref({});
const filterForm = reactive({
  checkTaskConfigId: null,
});
const cardClick = (item) => {
  router.toPage({
    path: PATH.PCRWJHDETAIL,
    params: {
      row: JSON.stringify({ ...item }),
      id: item.id,
    },
  });
};
const table = ref();
const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS,
  filterForm,
});
onMounted(() => {
  const { row } = getCurrentInstance().data;
  parentNode.value = row;
  queryParams.value.checkTaskConfigId = row.id;
  filterForm.checkTaskConfigId = row.id;
  getList();
});
onShow(() => {
  const { row } = getCurrentInstance().data;
  parentNode.value = row;
  // queryParams.value.checkTaskConfigId = row.id;
  // filterForm.checkTaskConfigId = row.id;
  getList();
});

const formathour = (item) => {
  if (item.checkState == "已排查") {
    return "剩余:0";
  }
  const nowNum = Date.now();
  const times = new Date(item.taskEndTime).getTime();

  let seconds = (times - nowNum) / 1000;
  let text = "剩余:";
  if (seconds > 0) {
    if (seconds >= 3600) {
      let hour = (seconds / 3600).toFixed(1);
      text += hour + "小时";
    } else {
      let hour = (seconds / 60).toFixed(1);
      text += hour + "分钟";
    }
  } else {
    text = "已超时";
  }
  return text;
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;

  &-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  &-times {
    background-color: rgb(22, 119, 255);
    padding: 2px;
    font-size: 12px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 5px;
    color: #fff;
  }
}
</style>
